<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>

<body style="background-color: #FFFAE3">
<div class="x-nav" style="height: 43px;background-color: #FFFAE3">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
          </span>
</div>
<div className="layui-btn-container" style="font-size: 20px;font-weight: bold;width: 500px;margin-left: 560px;" id="divLeft">
    采购计划审批一览表
</div>
<div id="div1">
    <table style="margin-left: 10px" class="layui-hide" id="text" lay-filter="demo"></table>
</div>
<div id="div2">
    <table class="layui-table" style="text-align: center">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th colspan="4" style="text-align: center;font-size: 20px;font-weight: bold;">采购计划明细信息</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">采购计划编号</td>
            <td style="width: 400px" id="stockNum"></td>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">采购计划名称</td>
            <td style="width: 400px" id="stockName1" ></td>
        </tr>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">公司名称</td>
            <td style="width: 400px">长沙北大青鸟有限公司</td>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">编制人</td>
            <td style="width: 400px">[[${session.employee.empName}]]</td>
        </tr>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">预算金额(元)</td>
            <td style="width: 400px" id="budget"></td>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">采购计划编制时间</td>
            <td style="width: 400px" id="date"></td>
        </tr>
        </tbody>
    </table>
    <table style="margin-left: 10px" class="layui-hide" id="table" lay-filter="demo"></table>
    <table class="layui-table" style="text-align: center">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">采购方式</td>
            <td style="width: 800px" class="demoTable" id="stockType1">
            </td>
        </tr>
        <tr id="trr">
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">拟选供应商</td>
            <td style="width: 800px">
                本产品类所有供应商
            </td>
        </tr>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">说明：（400字以内）</td>
            <td style="width: 800px" id="remark">
            </td>
        </tr>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">部长是否同意</td>
            <td style="width: 800px" id="leadAgree">
                <input type="radio" name="approval" value="同意">
                同意
                <input type="radio" name="approval" value="驳回">
                驳回
                <input type="radio" name="approval" value="废弃">
                废弃
            </td>
        </tr>
        <tr>
            <td style="background-color: #F2F2F2;font-weight: bold;width: 230px">部长审核意见</td>
            <td style="width: 800px">
                <textarea id="leadOpinion" name="opinion" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="layui-input-block">
        <button type="button" onclick="Fan()" class="layui-btn" lay-submit="" lay-filter="demo1">返回</button>
        <button type="button" onclick="submit()" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
    </div>
</div>

</body>

<script id="button" type="text/html">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">审批</a>
</script>

<script>
    let data;
    layui.use('table', function () {
        $("#div2").hide();
        var table = layui.table;
        table.render({
            elem: '#text'  //html中渲染table的id
            , url: '/stock/findDs'   //后台获取数据集合的地址
            , cellMinWidth: 80
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false//不显示首页
                , last: false //不显示尾页

            }, cols: [
                [
                    //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                     {field: 'id', sort: true, title: '序号', align: 'center'}
                    ,{field: 'stockNum',title: '123',hide:true}
                    , {field: 'stockName',  title: '采购计划名称', align: 'center'}
                    , {field: 'ssStatic', title: '计划进度', align: 'center'}
                    , {field: 'author', sort: true, title: '编制人', align: 'center'}
                    , {field: 'stockType', sort: true, title: '采购类型', align: 'center'}
                    , {field: 'budget', title: '预算价格', align: 'center'}
                    , {fixed: 'right', width: 220, title: '操作', toolbar: "#button", align: 'center'}
                ]
            ]
        });

        table.on('tool(demo)', function (obj) {
            data = obj.data;
            if(obj.event=='detail'){
                alert(data.stockNum);
                $("#div2").show();
                $("#div1").hide();
                layui.use('table', function () {
                    $.ajax({
                        url: "/stock/XiangQing",
                        data: {"stockNum": data.stockNum},
                        type: "GET",
                        success: function (result) {
                            $("#stockNum").html(result.stockNum);
                            $("#budget").html(result.budget);
                            $("#stockType1").html(result.stockType);
                            $("#remark").html(result.remark);
                            $("#stockName1").html(result.stockName);
                            var myDate = new Date;
                            var year = myDate.getFullYear(); //获取当前年
                            var mon = myDate.getMonth() + 1; //获取当前月
                            var date = myDate.getDate(); //获取当前日
                            $("#date").html(year + "年" + mon + "月" + date + "日");
                            var table = layui.table;
                            table.render({
                                elem: '#table'  //html中渲染table的id
                                , data: result.orders   //后台获取数据集合的地址
                                , cols: [
                                    [
                                        //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                                        , {field: 'id', title: '序号', align: 'center'}
                                        , {width: 200, field: 'materialCode', title: '物资编码', align: 'center'}
                                        , {width: 340, field: 'materialName', title: '物资名称', align: 'center'}
                                        , {width: 110, field: 'amount', title: '数量', align: 'center'}
                                        , {width: 110, field: 'measureUnit', title: '计量单位', align: 'center'}
                                        , {width: 110, field: 'startDate', title: '交货期', align: 'center'}
                                        , {width: 110, field: 'unitPrice', title: '协议价格（元）', align: 'center'}
                                        , {width: 110, field: 'sumPrice', title: '预算总金额（元）', align: 'center'}
                                        , {width: 110, field: 'startDate', title: '计划价（元/不含税）', align: 'center'}
                                    ]
                                ]
                            });
                        }
                    });
                });
            }
        });
    });
    function Fan(){
        $("#div1").show();
        $("#div2").hide();
    }
    function submit(){
        let ssStatic=$("input[name='approval']:checked").val()
        let leadOpinion=$("#leadOpinion").val()
        $.ajax({
            url: "/stock/UpdateByIdPr",
            data: {
                "id": data.id,
                "ssStatic": ssStatic,
                "leadOpinion": leadOpinion
            },
            type: "POST",
            success: function (result) {
                if (result === true) {
                    layer.alert("提交成功!")
                    setTimeout(() => {
                        location.reload()
                    }, 1000)
                } else {
                    layer.alert("提交失败!")
                }
            }
        });
    }
</script>

</html>